import React, {Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';

// export default
class CFlexBoxDemo1 extends Component {
	render() {
		return (
			<View style={styles.container}>
				<Text style={{backgroundColor: 'red', width: 80}}>第一个</Text>
				<Text style={{backgroundColor: 'green', width: 90}}>第二个</Text>
				<Text style={{backgroundColor: 'blue', width: 100}}>第三个</Text>
				<Text style={{backgroundColor: 'yellow', width: 1100}}>第四个</Text>
			</View>
		);
	}
}

const styles1 = StyleSheet.create({
	container: {
		// 背景颜色
		backgroundColor: 'purple',
		// 上边距
		marginTop: 25,
		// 改变主轴方向 enum('row', 'row-reverse', 'column', 'column-reverse')
		flexDirection: 'row',
		// 设置主轴的对齐方式 enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
		justifyContent: 'flex-start',
		// 设置侧轴的对齐方式 enum('flex-start', 'flex-end', 'center', 'stretch')
		alignItems: 'center',
		// 显示不下，换行 enum('wrap', 'nowrap')
		flexWrap: 'wrap'
	}
});

// export default
class CFlexBoxDemo2 extends Component {
	render() {
		return (
			<View style={styles.container}>
				{/*enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')*/}
				<Text style={{alignSelf: 'flex-start', backgroundColor: 'red', flex: 1, height: 60}}>第一个</Text>
				<Text style={{backgroundColor: 'green', flex: 2, height: 70}}>第二个</Text>
				<Text style={{backgroundColor: 'blue', flex: 2, height: 80}}>第三个</Text>
				<Text style={{backgroundColor: 'yellow', flex: 2, height: 90}}>第四个</Text>
			</View>
		);
	}
}

const styles2 = StyleSheet.create({
	container: {
		// 背景颜色
		backgroundColor: 'purple',
		// 上边距
		marginTop: 25,
		// 改变主轴方向 enum('row', 'row-reverse', 'column', 'column-reverse')
		flexDirection: 'row',
		// 设置主轴的对齐方式 enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
		justifyContent: 'flex-start',
		// 设置侧轴的对齐方式 enum('flex-start', 'flex-end', 'center', 'stretch')
		alignItems: 'center',
		// 显示不下，换行 enum('wrap', 'nowrap')
		// flexWrap: 'wrap'
	}
});

// 引入设备
let Dimensions = require('Dimensions');

export default class CFlexBoxDemo extends Component {
	render() {
		return (
			<View style={styles.outViewStyle}>
				<Text>当前屏幕宽度：{Dimensions.get('window').width}</Text>
				<Text>当前屏幕高度：{Dimensions.get('window').height}</Text>
				<Text>当前屏幕分辨率：{Dimensions.get('window').scale}</Text>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	outViewStyle: {
		// 占满屏幕
		flex: 1,
		// 主轴方向居中
		justifyContent: 'center',
		// 侧轴方向居中
		alignItems: 'center',
		// 背景颜色
		backgroundColor: 'red'
	}
});
